<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/toastr/toastr.min.css" rel="stylesheet">

    <script src="/js/jquery-3.2.1.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/toastr/toastr.min.js"></script>
    <script src="/common/common.js"></script>
    <style>
        #from
        {
            background-color: #96b97d;
            height: 1000px;
        }
        .mycenter
        {
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            height: 350px;
            width: 500px;
            padding: 5%;
            padding-left: 5%;
            padding-right: 5%;
        }
        .mycenter mysign
        {
            width: 440px;
        }
        .mycenter input, checkbox, button
        {
            margin-top: 2%;
            margin-left: 10%;
            margin-right: 10%;
        }
        .mycheckbox
        {
            margin-top: 10px;
            margin-left: 40px;
            margin-bottom: 10px;
            height: 10px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function (e) {
                if ($("[name='username']").val() == "") {
                    toastr.warning("请输入用户名！");
                    return;
                }
                if ($("[name='userpwd']").val() == "") {
                    toastr.warning("请输入密码！");
                    return;
                }
                $.ajax({
                    url:"userLogin",
                    type:"post",
                    data:{
                        username:$("[name='username']").val(),
                        userpwd:$("[name='userpwd']").val(),
                    },
                    success:function(resltEntity){
                        if (resltEntity.status == SUCCESS){
                            toastr.success(resltEntity.msg);
                            setTimeout(function(){
                                location="/index";
                            }, 500);
                        }else {
                            toastr.error(resltEntity.msg)
                        }
                    }
                })
            });
        });
        //注册
        $(function () {
            $('#zhuce').click(function (e) {
                location="tozhuce"
            });
        });
        $(function () {
            $('#findpwd').click(function (e) {
                location="togetPwd"
            });
        });
    </script>
    <script>
        $(function(){
            toastr.options = {
                "closeButton": false, //是否显示关闭按钮
                "debug": false, //是否使用debug模式
                "positionClass": "toast-top-full-width",//弹出窗的位置
                "showDuration": "300",//显示的动画时间
                "hideDuration": "1000",//消失的动画时间
                "timeOut": "5000", //展现时间
                "extendedTimeOut": "1000",//加长展示时间
                "showEasing": "swing",//显示时的动画缓冲方式
                "hideEasing": "linear",//消失时的动画缓冲方式
                "showMethod": "fadeIn",//显示时的动画方式
                "hideMethod": "fadeOut" //消失时的动画方式
            };
            /*
            toastr.success("祝贺你成功了");
            toastr.info("这是一个提示信息");
            toastr.warning("警告你别来烦我了");
            toastr.error("出现错误，请更改");
            toastr.clear();

            toast-center-center 屏幕中间
            toast-top-left  顶端左边
            toast-top-right    顶端右边
            toast-top-center  顶端中间
            toast-top-full-width 顶端，宽度铺满整个屏幕
            toast-botton-right
            toast-bottom-left
            toast-bottom-center
            toast-bottom-full-width
             */
        });
    </script>
</head>
<body>
<div style="height: 400px;width: 30%;border: 1px solid #e0d8d8;float: left;margin: 10% 33%;">
    <div style="width: 100%; height: 80px;border: 1px solid #e0d8d8; padding: 15px 0px; text-align: center;">
        <h3>全国青少年手球运动员登录</h3>
    </div>
    <div style="height: 300px;" class="row">
        <div class="col-lg-12" style="margin: 25px 0;"><!--用户名-->
            <div class="col-lg-2" style="float: left;">
                <label style="margin: 7px 0; font-size: 18px;">账号</label>
            </div>
            <div class="col-lg-9" style="float: left;">
                <input type="text" class="form-control" name="username" placeholder="请输入账户名" required autofocus />
            </div>
        </div>
        <div class="col-lg-12" style="margin: 25px 0;"><!--密码-->
            <div class="col-lg-2" style="float: left;">
                <label style="margin: 7px 0; font-size: 18px;">密码</label>
            </div>
            <div class="col-lg-9" style="float: left;">
                <input type="password" class="form-control" name="userpwd" placeholder="请输入密码" required
                       autofocus />
            </div>
        </div>
        <div style="width: 100%; height: 10px;">
            <div style="float: right; margin-right: 20px;"><a href="/togetPwd">忘记密码？</a></div>
        </div>
        <div class="col-lg-12" style="margin: 25px 0;"><!--按钮-->
            <button type="button" id="btn" class="btn btn-default col-lg-3" style="border: 1px solid #f0f0f0;">登录</button>
            <button type="button" id="zhuce" class="btn btn-info col-lg-3">注册</button>
        </div>
    </div>
</div>
<!--<form id="from">
    <div class="mycenter">
        <div class="mysign">
            <div class="col-lg-11 text-center text-info">
                <h2>全国青少年手球运动员登录</h2>
            </div>
            <div class="col-lg-10">
                用户名:<input type="text" class="form-control" name="username" placeholder="请输入账户名" required
                           autofocus />
            </div>
            <div class="col-lg-10">
            </div>
            <div class="col-lg-10">
                密码:<input type="password" class="form-control" name="userpwd" placeholder="请输入密码" required
                          autofocus />
            </div>
            <div class="col-lg-10">
            </div>
            <div class="col-lg-10 mycheckbox checkbox">
                <input type="checkbox" class="col-lg-1">记住密码</input>
            </div>
            <div class="col-lg-10">
            </div>
            <div class="col-lg-10">
                <button type="button" id="btn" class="btn btn-success col-lg-12">登录</button>
                <button type="button" id="zhuce" class="btn btn-success col-lg-12">注册</button>
                <button type="button" id="findpwd" class="btn btn-success col-lg-12">找回密码</button>
            </div>
        </div>
    </div>
</form>-->
</body>
</html>